<template>
  <vcu-collapse v-model="activeName" accordion class="home-menu-wrap">
    <vcu-collapse-item
      titleClass="menu-collapse-item"
      :title="item.meta.title"
      :name="key"
      :key="key"
      v-for="(item, key) in menuRes"
    >
      <vcu-cell
        :title="list.meta.title"
        :key="i"
        v-for="(list, i) in item.children"
        is-link
        @click="handleGo(list)"
      ></vcu-cell>
    </vcu-collapse-item>
  </vcu-collapse>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import router, { menuRouter } from "../router";
export default defineComponent({
  setup() {
    const activeName = ref("1");

    const handleGo = (list: any) => {
      router.push({
        name: list.name,
      });
    };
    return {
      activeName,
      menuRes: menuRouter,
      handleGo,
    };
  },
  components: {},
});
</script>

<style lang="less">
.home-menu-wrap {
  .menu-collapse-item {
    font-weight: 600;
  }
  .vcu-collapse-item__content {
    padding: 0;
    .vcu-cell__title {
      padding-left: 15px;
    }
  }
}
</style>
